<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="resources/css/public.css" media="all"/>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body class="childrenBody">
<form class="layui-form">
    <script type="text/html" id="data-toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="export" id="exportFile">导出</button>
        </div>
    </script>
    <table id="customertableList" lay-filter="customertableList"></table>
</form>

<script type="text/javascript" src="resources/layui/layui.js"></script>
<script type="text/javascript" src="resources/layui/layui_exts/excel.js"></script>
<script th:inline="none">
    layui.use(['form','layer','laydate','table','laytpl'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table;

        //商品列表
        var tableIns = table.render({
            cellMinWidth: 80,
            elem: '#customertableList',
            url:"show/countlevel",
            page : false,
            id : "customertableListTable",
            toolbar: "#data-toolbar",
            defaultToolbar: ['filter', 'print', 'exports'],
            totalRow: true,
            title: '数据表',
            cols : [[
               /* {type: "checkbox", fixed:"left"},*/
                {field: 'basiItem', title: '等级',align:"center"},
                {field: 'countlevel', title: '数量',align:"center"},
                ]]
        });

        /*导出数据*/
        $('#exportFile').on('click',function () {
            console.info("export");
            $.ajax({
                url: "show/countlevel",
                type: 'get',
                async: false,
                dataType: 'json',
                success: function (res) {
                    LAY_EXCEL.exportExcel(res.data, 'data.xlsx', 'xlsx')
                }
            });
        });
    })
</script>

<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
    $(document).ready(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var values=[];    //纵坐标数组（实际用来盛放Y坐标值）

        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/show",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].basiItem);
                        values.push(result[i].countlevel);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({
                        //加载数据图表
                        title:{
                            text: '顾客等级统计图'
                        },

                        legend: {
                            data:['用户等级']
                        },
                        xAxis: {
                            data: names,
                            axisLabel:{
                                interval: 0
                            }

                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '用户等级',
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            '#27727B',
                                        ];
                                        return colorList[params.dataIndex]
                                    },
                                    label: {
                                        show: true,
                                        position: 'top',
//                             formatter: '{c}'
                                        formatter: '{b}\n{c}'
                                    }
                                }
                            },
                            data: values
                        }]
                    });
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });
</script>
</body>
</html>